<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        table {
            text-align: center;
            line-height: 45px;
            border: 1px solid #000;

        }

        tr {
            height: 45px;
        }

        .blue {
            background-color: #0099cc;
        }
    </style>
</head>

<body>
    <!-- 题目描述
    全选案例，模拟品优购购物车模块中的全选需求：
    1）点击上面的全选，下面全部选中。
    2）下面的input如果全部选中，上面的input同步选中。 -->
    <table width="700" cellspacing="0" border="" cellpadding="0">
        <thead>
            <tr class="blue">
                <th>
                    <input type="checkbox">
                </th>
                <th>
                    课程名称
                </th>
                <th>
                    所属学院
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>
                    JavaScript
                </td>
                <td>
                    前端移动开发学院
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>
                    JavaScript
                </td>
                <td>
                    前端移动开发学院
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>
                    JavaScript
                </td>
                <td>
                    前端移动开发学院
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>
                    JavaScript
                </td>
                <td>
                    前端移动开发学院
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        //全选按钮状态改变事件
        $('thead input').change(function() {
            //把全选按钮的状态赋值给下面所有的复选框
            $('tbody input').prop('checked', $(this).prop('checked'))
        })

        //给所有复选框添加状态改变事件
        $('tbody input').change(function() {
            //如果复选按钮全部选中，则全选按钮也选中，否则不选中
            if($('tbody input:checked').length === $('tbody input').length) {
                $('thead input').prop('checked', true)
            } else {
                $('thead input').prop('checked', false)
            }
        })
    </script>
</body>

</html>